<template>
    <el-dialog v-model="dialogVisible" :title="titleValue" width="378" class="container">
        <el-form label-width="auto" style="max-width: 600px;" :model="tagItem">
            <el-form-item label="标签名称">
                <el-input placeholder=" 请输入" v-model="tagItem.name" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="onConfirmBtn(tagItem)">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue';
import { addTagApi, updateTagApi } from '../../../api/tagcontrol';
const emit = defineEmits(['findTag'])
// 控制弹窗的打开关闭状态
const dialogVisible = ref(false);
const tagItem = ref({});
const titleValue = ref('新增标签')
const openDialog = (formItem) => {
    if (formItem) {
        tagItem.value = { ...formItem };
        console.log(formItem);

        titleValue.value = '编辑标签'
    } else {
        tagItem.value = {};
    }

    dialogVisible.value = true;
}


defineExpose({
    openDialog
})

//添加
function onAddBtn() {
    console.log({ ...tagItem });

    addTagApi({ ...tagItem.value }).then(res => {
        if (res.code == 200) {
            ElMessage.success('添加成功!');
            emit('findTag');
        } else {
            ElMessage.error(res.message);
        }
    })
}

//修改
function onUpdatedBtn() {
    updateTagApi({ ...tagItem.value }).then(res => {
        if (res.code == 200) {
            ElMessage.success('修改成功!');
            emit('findTag');
        } else {
            ElMessage.error(res.message);
        }
    })
}


function onConfirmBtn(item) {
    if (item._id) {
        onUpdatedBtn();
    } else {
        onAddBtn();
    }
    dialogVisible.value = false;
}





</script>

<style scoped></style>